import React, { useEffect, useState, Fragment } from 'react';
import { connect } from 'umi';
import { Form, Table } from 'antd';
import { Pagination } from '@/components';
import moment from 'moment';
import LinkTo from '@/components/LinkTo';
import styles from './TerviewList.less';
import SearchForm from './Components/SearchForm';

const ConductInterview = ({ dispatch, form, interview, user, name, loading }) => {
    const {
        conductpagination,
        orderBy,
        queryleaderinterviewsList,
        interviewTypeList,
        interviewConclusionTypeList
    } = interview;
    const [interviewTypeValue, setinterviewTypeValue] = useState([]);
    const [interviewConclusionValue, setinterviewConclusionValue] = useState([]);
    const [sorters, setSorters] = useState(''); // 排序储存
    const [filter, setFilter] = useState({}); // 排序储存
    const User = user.currentUser; // 登陆人信息
    // 表格操作返回项
    const actionReturn = record => {
        if (record.isEditRecord) {
            return (
                <LinkTo
                    to="/personal/portal/recruit/interview/edit"
                    query={{
                        arrangeCode: record.interviewArrangeCode,
                        code: record.candidateCode,
                        type: 'type2'
                    }}
                >
                    填写面试结果
                </LinkTo>
            );
        }

        return (
            <LinkTo
                to="/personal/portal/recruit/interview/edit"
                query={{
                    arrangeCode: record.interviewArrangeCode,
                    code: record.candidateCode,
                    type: 'type4'
                }}
            >
                面试详情
            </LinkTo>
        );
    };
    const getSexName = key => {
        if (key === '1') {
            return (
                <i className="iconfont iconoa_table_icon_men_default" style={{ color: '#3aa0ff', margin: '0 5px' }} />
            );
        }
        if (key === '2') {
            return (
                <i className="iconfont iconoa_table_icon_women_default" style={{ color: '#f2637b', margin: '0 5px' }} />
            );
        }
        return '';
    };
    const getName = list => (
        <Fragment>
            <div className={styles.colum_info_1}>
                <div
                    title={list.talentName}
                    style={{
                        display: 'inline-block',
                        maxWidth: '200px',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        verticalAlign: ' text-bottom'
                    }}
                >
                    {list.isEditRecord ? (
                        <LinkTo
                            className={styles.LinkTo}
                            to="/personal/portal/recruit/interview/edit"
                            query={{
                                arrangeCode: list.interviewArrangeCode,
                                code: list.candidateCode,
                                type: 'type2'
                            }}
                        >
                            {list.talentName}
                        </LinkTo>
                    ) : (
                        <LinkTo
                            className={styles.LinkTo}
                            to="/personal/portal/recruit/interview/edit"
                            query={{
                                arrangeCode: list.interviewArrangeCode,
                                code: list.candidateCode,
                                type: 'type4'
                            }}
                        >
                            {list.talentName}
                        </LinkTo>
                    )}
                </div>
                {getSexName(list.talentSex)}
            </div>
        </Fragment>
    );
    const columns = [
        {
            title: '姓名',
            dataIndex: 'talentName',
            key: 'talentName',
            fixed: 'left',
            width: 160,
            render: (text, record) => getName(record)
        },
        {
            title: '应聘职位',
            dataIndex: 'recruitPost',
            key: 'recruitPost',
            fixed: 'left',
            width: 160
        },
        {
            title: '公司',
            dataIndex: 'companyName',
            key: 'companyName',
            width: 200
        },
        {
            title: '面试时间',
            dataIndex: 'interviewTime',
            key: 'interviewTime',
            sorter: () => {},
            width: 200
        },
        {
            title: '面试类型',
            dataIndex: 'interviewTypeValue',
            key: 'interviewTypeValue',
            filters: interviewTypeList,
            width: 180
        },
        {
            title: '面试结果',
            dataIndex: 'interviewConclusionValue',
            key: 'interviewConclusionValue',
            filters: interviewConclusionTypeList,
            width: 180
        },
        {
            title: '评分',
            dataIndex: 'interviewScore',
            key: 'interviewScore',
            sorter: () => {},
            width: 120,
            render: text => {
                if (text || text === 0) {
                    return `${text} 分`;
                }
                return '--';
            }
        },
        {
            title: '招聘负责人',
            dataIndex: 'interviewLeaderName',
            key: 'interviewLeaderName'
            // width: 140
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: (text, record) => actionReturn(record),
            width: 120,
            fixed: 'right'
        }
    ];

    const getListDict = () => {
        dispatch({
            type: 'interview/getListDict'
        });
    };
    const changeTable = (pagination, filters, sorter) => {
        let orderBys;
        let sorterField;
        if (sorter && sorter.field && sorter.order) {
            if (sorter.field === 'interviewTime') {
                sorterField = 'interview_time';
            }
            if (sorter.field === 'interviewScore') {
                sorterField = 'interview_score';
            }
            const order = sorter.order.trim().split('end')[0];
            orderBys = `${sorterField} ${order}`;
        } else if (typeof sorters === 'string') {
            dispatch({
                type: 'interview/save',
                payload: {
                    orderBy: ''
                }
            });
        }

        if (filters && filters.interviewTypeValue) {
            setinterviewTypeValue(filters.interviewTypeValue);
        }
        if (filters && filters.interviewConclusionValue) {
            setinterviewConclusionValue(filters.interviewConclusionValue);
        }
        dispatch({
            type: 'interview/save',
            payload: {
                orderBy: orderBys || '',
                conductpagination: {
                    ...interview.conductpagination,
                    ...pagination
                }
            }
        });
        // 新的分页组件无法自动回到第一页的bug修复
        if (sorter && sorters !== sorter) {
            setSorters(sorter);
            dispatch({
                type: 'interview/save',
                payload: {
                    orderBy: orderBys || '',
                    conductpagination: {
                        ...interview.conductpagination,
                        current: 1
                    }
                }
            });
        }
        if (filters && JSON.stringify(filter) !== JSON.stringify(filters)) {
            setFilter(filters);
            dispatch({
                type: 'interview/save',
                payload: {
                    orderBy: orderBys || '',
                    conductpagination: {
                        ...interview.conductpagination,
                        current: 1
                    }
                }
            });
        }
    };
    const getPayload = type => {
        const {
            candidateName,
            insertDate,
            companyId,
            interviewEmployeeId,
            interviewLeaderId,
            recruitCode
        } = form.getFieldsValue();
        const payload = {
            candidateName: candidateName || '',
            companyId: companyId || '',
            beginTime: insertDate && insertDate.length > 0 ? moment(insertDate[0]).format('YYYY-MM-DD 00:00:00') : '',
            endTime: insertDate && insertDate.length > 0 ? moment(insertDate[1]).format('YYYY-MM-DD 23:59:59') : '',
            interviewEmployeeCodes: interviewEmployeeId || [],
            interviewLeaderIds: interviewLeaderId || [],
            recruitCode: recruitCode || '',
            interviewType: interviewTypeValue,
            interviewConclusion: interviewConclusionValue,

            orderByField: orderBy,
            pageNo: type ? 1 : conductpagination.current,
            pageSize: type ? 10 : conductpagination.pageSize
        };
        return payload;
    };
    // 高级搜索
    const handleSearch = type => {
        dispatch({
            type: 'interview/queryleaderinterviews',
            payload: getPayload(type)
        });
    };

    useEffect(
        () => () => {
            dispatch({
                type: 'interview/save',
                payload: {
                    orderBy: '',
                    conductpagination: {
                        ...conductpagination,
                        pageSize: 10,
                        current: 1
                    }
                }
            });
        },
        []
    );

    useEffect(() => {
        getListDict();
    }, []);
    useEffect(() => {
        if (name) {
            form.setFieldsValue(
                {
                    candidateName: name
                },
                () => {
                    handleSearch();
                }
            );
        } else {
            handleSearch();
        }
    }, [conductpagination.pageSize, conductpagination.current, orderBy, interviewConclusionValue, interviewTypeValue]);

    return (
        <Fragment>
            <SearchForm
                form={form}
                user={User}
                onSearch={() => {
                    handleSearch(1);
                }}
                identity="ing"
            />
            <Table
                bordered={false}
                loading={loading.effects['interview/queryleaderinterviews']}
                dataSource={queryleaderinterviewsList}
                columns={columns}
                scroll={{ x: 'max-content' }}
                onChange={changeTable}
                rowKey="id"
                pagination={false}
            />
            <Pagination {...conductpagination} onChange={changeTable} />
        </Fragment>
    );
};

export default connect(({ loading, interview, user }) => ({
    user,
    interview,
    loading
}))(Form.create()(ConductInterview));
